<template>
<el-container>
<el-header>
  <el-collapse v-model="activeNames" @change="collapse_handleChange">
      <el-collapse-item title="筛选标签" name="1">
        <el-card class="box-card">
          <!-- 显示选中标签区域 -->
          <div style="text-align: center;margin-top: 15px;margin-bottom:15px">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          </div>
          <el-row> 
            <el-col :offset="10">
              <el-button type="primary"  size="mini" round @click="submitTag">确定筛选</el-button>
            </el-col>
          </el-row>
          </el-card>
          <!-- @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm" -->
          
            <div class="block" style="text-align: center;margin-top: 30px;">
                <span class="demonstration">筛选标签</span>
                <el-cascader
                    v-if="inputVisible"
                    ref="saveTagInput"
                    v-model="value"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                    @change="tag_handleChange"></el-cascader>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </div>
        
      </el-collapse-item>
      <el-collapse-item name="2">
        <el-tabs @tab-click="handleClick">
            <list-show v-if="showflag"></list-show>
            <el-table border id="exportTab" v-if="!showflag" :row-class-name="tableRowClassName"
            :data="tabledata.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            :current-page.sync="currentPage"
            tooltip-effect="dark">
              <el-table-column
                prop="username"
                label="姓名"
                width="80">
              </el-table-column>
              <el-table-column
                prop="gender"
                label="性别"
                width="80">
              </el-table-column>
              <el-table-column
                prop="age"
                label="年龄"
                width="80">
              </el-table-column>
              <el-table-column
                prop="constellation"
                label="星座"
                width="90">
              </el-table-column>
              <el-table-column
                prop="email"
                label="邮箱"
                width="180">
              </el-table-column>
              <el-table-column
                prop="mobile"
                label="手机号码"
                width="150">
              </el-table-column>
              <el-table-column
                prop="marriage"
                label="婚姻状况"
                width="100">
              </el-table-column>
              <el-table-column
                prop="job"
                label="职业"
                width="90">
              </el-table-column>
              <el-table-column
                prop="nationality"
                label="国籍"
                width="120">
              </el-table-column>
              <el-table-column
                prop="politicalFace"
                label="政治面貌"
                width="120">
              </el-table-column>
              <el-table-column
                prop="consumeAbility"
                label="消费能力"
                width="60">
              </el-table-column>
              <el-table-column
                prop="internal"
                label="消费周期"
                width="180">
              </el-table-column>
              <el-table-column
                prop="returnRate"
                label="退货率"
                width="180">
              </el-table-column>
              <el-table-column
                prop="timeSlot"
                label="购物时间"
                width="120">
              </el-table-column>
              <el-table-column
                prop="favorType_0"
                label="喜爱品类"
                width="120">
              </el-table-column>
              <el-table-column
                prop="favorType_1"
                label="喜爱品类"
                width="120">
              </el-table-column>
              <el-table-column
                prop="favorType_2"
                label="喜爱品类"
                width="120">
              </el-table-column>
              <el-table-column
                prop="favorBrand_0"
                label="喜爱品牌"
                width="120">
              </el-table-column>
              <el-table-column
                prop="favorBrand_1"
                label="喜爱品牌"
                width="120">
              </el-table-column>
              <el-table-column
                prop="favorProduct_0"
                label="喜爱商品"
                width="220">
              </el-table-column>
              <el-table-column
                prop="favorProduct_1"
                label="喜爱商品"
                width="220">
              </el-table-column>
              <el-table-column
                prop="favorProduct_2"
                label="喜爱商品"
                width="220">
              </el-table-column>
              <el-table-column
                prop="ref_url"
                label="常浏览网址"
                width="320">
              </el-table-column>
              
              
            </el-table>
            <el-row :gutter='10' v-if="!showflag">
            <el-col :span='18'>
            <div style="text-align: center;margin-top: 30px;">
              <el-pagination
                background
                @size-change="handleSizeChange"
                :page-sizes="[5, 10, 15,20]"
                :page-size="pagesize"
                layout="total,sizes,prev, pager, next,jumper"
                :total="total"
                @current-change="current_change">
              </el-pagination>
            </div>
            </el-col>
              <el-col :span='6'>
                  <div style="text-align: center;margin-top: 30px;"><ExportExcel :id="'exportTab'" :name="'导出Table'"></ExportExcel></div>
              </el-col>
            </el-row>
           </el-tabs>
      </el-collapse-item>
  </el-collapse>
</el-header>
<el-main>
  
</el-main>
</el-container>
</template>

<script>
import ExportExcel from '../../components/ExportExcel'
import listShow from './listShow.vue'
export default {
  components: {
    ExportExcel,listShow 
},
  data() {

      return {

        //分页器
        total: 0,
        pagesize:10,
        currentPage:1,

        showflag:true,
        tabledata:[],
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',

        activeNames: ['2'],
        

        value: [],
        options: [{
          value: '用户特征',
          label: '用户特征',
          children: [{
            value: '性别',
            label: '性别',
            children: [{
              value: '男',
              label: '男'
            }, {
              value: '女',
              label: '女'
            }]
          }, {
            value: '年龄段',
            label: '年龄段',
            children: [{
              value: '50后',
              label: '50后'
            }, {
              value: '60后',
              label: '60后'
            },{
              value: '70后',
              label: '70后'
            },{
              value: '80后',
              label: '80后'
            }, {
              value: '90后',
              label: '90后'
            }, {
              value: '00后',
              label: '00后'
            }, {
              value: '10后',
              label: '10后'
            }, {
              value: '20后',
              label: '20后'
            },]
          },{
            value:'政治面貌',
            label:'政治面貌',
            children:[{
              value:'群众',
              label:'群众'
            },{
              value:'党员',
              label:'党员'
            },{
              value:'无党派人士',
              label:'无党派人士'
            }]
          },{
            value:'职业',
            label:'职业',
            children:[{
              value:'学生',
              label:'学生'
            },{
              value:'公务员',
              label:'公务员'
            },{
              value:'军人',
              label:'军人'
            },{
              value:'警察',
              label:'警察'
            },{
              value:'教师',
              label:'教师'
            },{
              value:'白领',
              label:'白领'
            },{
              value:'其他',
              label:'其他'
            }]
          },{
            value:'婚姻状况',
            label:'婚姻状况',
            children:[{
              value:'未婚',
              label:'未婚'
            },{
              value:'已婚',
              label:'已婚'
            },{
              value:'离异',
              label:'离异'
            }]
          },{
            value:'星座',
            label:'星座',
            children:[{
              value:'白羊座',
              label:'白羊座'
            },{
              value:'金牛座',
              label:'金牛座'
            },{
              value:'双子座',
              label:'双子座'
            },{
              value:'巨蟹座',
              label:'巨蟹座'
            },{
              value:'狮子座',
              label:'狮子座'
            },{
              value:'处女座',
              label:'处女座'
            },{
              value:'天秤座',
              label:'天秤座'
            },{
              value:'天蝎座',
              label:'天蝎座'
            },{
              value:'射手座',
              label:'射手座'
            },{
              value:'摩羯座',
              label:'摩羯座'
            },{
              value:'水瓶座',
              label:'水瓶座'
            },{
              value:'双鱼座',
              label:'双鱼座'
            }]
          },{
            value:'国籍',
            label:'国籍',
            children:[{
              value:'中国大陆',
              label:'中国大陆'
            },{
              value:'中国香港',
              label:'中国香港'
            },{
              value:'中国澳门',
              label:'中国澳门'
            },{
              value:'中国台湾',
              label:'中国台湾'
            },{
              value:'其它',
              label:'其它'
            }
            ]
          }]
        }, {
          value: '消费特征',
          label: '消费特征',
          children: [{
            value: '消费周期',
            label: '消费周期',
            children: [{
              value: '7日',
              label: '7日'
            }, {
              value: '2周',
              label: '2周'
            }, {
              value: '1月',
              label: '1月'
            }, {
              value: '2月',
              label: '2月'
            }, {
              value: '3月',
              label: '3月'
            }, {
              value: '4月',
              label: '4月'
            }, {
              value: '5月',
              label: '5月'
            }, {
              value: '6月',
              label: '6月'
            }]
          }, {
            value: '消费能力',
            label: '消费能力',
            children: [{
              value: '超高',
              label: '超高'
            }, {
              value: '高',
              label: '高'
            }, {
              value: '中上',
              label: '中上'
            }, {
              value: '中',
              label: '中'
            }, {
              value: '中下',
              label: '中下'
            }, {
              value: '低',
              label: '低'
            }, {
              value: '很低',
              label: '很低'
            },]
          }, {
            value: '客单价',
            label: '客单价',
            children: [{
              value: '1-999',
              label: '1-999'
            }, {
              value: '1000-2999',
              label: '1000-2999'
            }, {
              value: '3000-4999',
              label: '3000-4999'
            }, {
              value: '5000-9999',
              label: '5000-9999'
            }]
          }, {
            value: '支付方式',
            label: '支付方式',
            children: [{
              value: '支付宝',
              label: '支付宝'
            }, {
              value: '微信',
              label: '微信'
            }, {
              value: '储蓄卡',
              label: '储蓄卡'
            }, {
              value: '信用卡',
              label: '信用卡'
            }]
          }, {
            value: '单笔最高',
            label: '单笔最高',
            children: [{
              value: '1-999',
              label: '1-999'
            }, {
              value: '1000-2999',
              label: '1000-2999'
            }, {
              value: '3000-4999',
              label: '3000-4999'
            }, {
              value: '5000-9999',
              label: '5000-9999'
            },]
          }, {
            value: '购买频率',
            label: '购买频率',
            children: [{
              value: '高',
              label: '高'
            }, {
              value: '中',
              label: '中'
            }, {
              value: '低',
              label: '低'
            },]
          },{
            value: '退货率',
            label: '退货率',
            children: [{
              value: '高',
              label: '高'
            }, {
              value: '中',
              label: '中'
            }, {
              value: '低',
              label: '低'
            },]
          },{
            value: '换货率',
            label: '换货率',
            children: [{
              value: '高',
              label: '高'
            }, {
              value: '中',
              label: '中'
            }, {
              value: '低',
              label: '低'
            },]
          },{
            value: '客服咨询频率',
            label: '客服咨询频率',
            children: [{
              value: '高',
              label: '高'
            }, {
              value: '中',
              label: '中'
            }, {
              value: '低',
              label: '低'
            },]
          },]
        }, {
          value: '兴趣特征',
          label: '兴趣特征',
          children: [{
            value: '最近登陆',
            label: '最近登陆',
            children:[{
              value:'1天内',
              label:'1天内'
            },{
              value:'7天内',
              label:'7天内'
            },{
              value:'14天内',
              label:'14天内'
            },{
              value:'30天内',
              label:'30天内'
            },{
              value:'一个月以上',
              label:'一个月以上'
            }]
          }, {
            value: '浏览页面',
            label: '浏览页面',
            children:[{
              value:'登录页',
              label:'登录页'
            },{
              value:'首页',
              label:'首页'
            },{
              value:'分类页',
              label:'分类页'
            },{
              value:'商品页',
              label:'商品页'
            },{
              value:'我的订单页',
              label:'我的订单页'
            }]
          }, {
            value: '浏览时长',
            label: '浏览时长',
            children:[{
              value:'1分钟内',
              label:'1分钟内'
            },{
              value:'1-5分钟',
              label:'1-5分钟'
            },{
              value:'5分钟以上',
              label:'5分钟以上'
            },]
          },{
            value: '访问频率',
            label: '访问频率',
            children:[{
              value:'经常',
              label:'经常'
            },{
              value:'从不',
              label:'从不'
            },{
              value:'偶尔',
              label:'偶尔'
            },{
              value:'很少',
              label:'很少'
            }]
          },{
            value: '设备类型',
            label: '设备类型',
            children:[{
              value:'Windows',
              label:'Windows'
            },{
              value:'Mac',
              label:'Mac'
            },{
              value:'Linux',
              label:'Linux'
            },{
              value:'Android',
              label:'Android'
            },{
              value:'IOS',
              label:'IOS'
            }]
          },{
            value: '浏览时段',
            label: '浏览时段',
            children:[{
              value:'1点-7点',
              label:'1点-7点'
            },{
              value:'8点-12点',
              label:'8点-12点'
            },{
              value:'13点-17点',
              label:'13点-17点'
            },{
              value:'18点-21点',
              label:'18点-21点'
            },{
              value:'22点-24点',
              label:'22点-24点'
            }]
          },{
            value: '登录频率',
            label: '登录频率',
            children:[{
              value:'无',
              label:'无'
            },{
              value:'较少',
              label:'较少'
            },{
              value:'一般',
              label:'一般'
            },{
              value:'经常',
              label:'经常'
            },]
          },{
            value: '浏览商品',
            label: '浏览商品',
            children:[{
              value:'海尔电热水器EC6002-R',
              label:'海尔电热水器EC6002-R'
            },{
              value:'海尔波轮洗衣机XQB70-M1268 关爱',
              label:'海尔波轮洗衣机XQB70-M1268 关爱'
            },{
              value:'海尔原汁机众筹HYZ-101A',
              label:'海尔原汁机众筹HYZ-101A'
            },{
              value:'海尔冰箱BCD-216SDN',
              label:'海尔冰箱BCD-216SDN'
            },{
              value:'海尔滚筒洗衣机XQG70-B12866',
              label:'海尔滚筒洗衣机XQG70-B12866'
            },{
              value:'统帅彩电众筹D50MF5000',
              label:'统帅彩电众筹D50MF5000'
            },{
              value:'海尔燃气灶JZT-QE3B(12T)',
              label:'海尔燃气灶JZT-QE3B(12T)'
            },{
              value:'统帅投影仪众筹isee mini 1S',
              label:'统帅投影仪众筹isee mini 1S'
            },{
              value:'海尔波轮洗衣机XQB55-M1268 关爱',
              label:'海尔波轮洗衣机XQB55-M1268 关爱'
            },{
              value:'MOOKA彩电 U50H7[mooka50寸全套餐]',
              label:'MOOKA彩电 U50H7[mooka50寸全套餐]'
            },{
              value:'海尔波轮洗衣机XQS70-Z9288 至爱',
              label:'海尔波轮洗衣机XQS70-Z9288 至爱'
            },{
              value:'卡萨帝冰箱 BCD-346WSCV',
              label:'卡萨帝冰箱 BCD-346WSCV'
            },]
          },{
            value: '购买商品',
            label: '购买商品',
            children:[{
              value:'海尔电热水器EC6002-R',
              label:'海尔电热水器EC6002-R'
            },{
              value:'海尔波轮洗衣机XQB70-M1268 关爱',
              label:'海尔波轮洗衣机XQB70-M1268 关爱'
            },{
              value:'海尔原汁机众筹HYZ-101A',
              label:'海尔原汁机众筹HYZ-101A'
            },{
              value:'海尔冰箱BCD-216SDN',
              label:'海尔冰箱BCD-216SDN'
            },{
              value:'海尔滚筒洗衣机XQG70-B12866',
              label:'海尔滚筒洗衣机XQG70-B12866'
            },{
              value:'统帅彩电众筹D50MF5000',
              label:'统帅彩电众筹D50MF5000'
            },{
              value:'海尔燃气灶JZT-QE3B(12T)',
              label:'海尔燃气灶JZT-QE3B(12T)'
            },{
              value:'统帅投影仪众筹isee mini 1S',
              label:'统帅投影仪众筹isee mini 1S'
            },{
              value:'海尔波轮洗衣机XQB55-M1268 关爱',
              label:'海尔波轮洗衣机XQB55-M1268 关爱'
            },{
              value:'MOOKA彩电 U50H7[mooka50寸全套餐]',
              label:'MOOKA彩电 U50H7[mooka50寸全套餐]'
            },{
              value:'海尔波轮洗衣机XQS70-Z9288 至爱',
              label:'海尔波轮洗衣机XQS70-Z9288 至爱'
            },{
              value:'卡萨帝冰箱 BCD-346WSCV',
              label:'卡萨帝冰箱 BCD-346WSCV'
            },]
          },{
            value: '商品偏好',
            label: '商品偏好',
            children:[{
              value:'海尔电热水器EC6002-R',
              label:'海尔电热水器EC6002-R'
            },{
              value:'海尔波轮洗衣机XQB70-M1268 关爱',
              label:'海尔波轮洗衣机XQB70-M1268 关爱'
            },{
              value:'海尔原汁机众筹HYZ-101A',
              label:'海尔原汁机众筹HYZ-101A'
            },{
              value:'海尔冰箱BCD-216SDN',
              label:'海尔冰箱BCD-216SDN'
            },{
              value:'海尔滚筒洗衣机XQG70-B12866',
              label:'海尔滚筒洗衣机XQG70-B12866'
            },{
              value:'统帅彩电众筹D50MF5000',
              label:'统帅彩电众筹D50MF5000'
            },{
              value:'海尔燃气灶JZT-QE3B(12T)',
              label:'海尔燃气灶JZT-QE3B(12T)'
            },{
              value:'统帅投影仪众筹isee mini 1S',
              label:'统帅投影仪众筹isee mini 1S'
            },{
              value:'海尔波轮洗衣机XQB55-M1268 关爱',
              label:'海尔波轮洗衣机XQB55-M1268 关爱'
            },{
              value:'MOOKA彩电 U50H7[mooka50寸全套餐]',
              label:'MOOKA彩电 U50H7[mooka50寸全套餐]'
            },{
              value:'海尔波轮洗衣机XQS70-Z9288 至爱',
              label:'海尔波轮洗衣机XQS70-Z9288 至爱'
            },{
              value:'卡萨帝冰箱 BCD-346WSCV',
              label:'卡萨帝冰箱 BCD-346WSCV'
            },]
          },{
            value: '品类偏好',
            label: '品类偏好',
            children:[{
              value:'电热水器',
              label:'电热水器'
            },{
              value:'燃气灶',
              label:'燃气灶'
            },{
              value:'智能电视',
              label:'智能电视'
            },{
              value:'微波炉',
              label:'微波炉'
            },{
              value:'Haier/海尔冰箱',
              label:'Haier/海尔冰箱'
            },{
              value:'4K电视',
              label:'4K电视'
            },{
              value:'烟灶套系',
              label:'烟灶套系'
            },{
              value:'空气净化器',
              label:'空气净化器'
            },{
              value:'净水机',
              label:'净水机'
            },{
              value:'滤芯',
              label:'滤芯'
            },{
              value:'电饭煲',
              label:'电饭煲'
            },{
              value:'料理机',
              label:'料理机'
            },{
              value:'吸尘器/除螨仪',
              label:'吸尘器/除螨仪'
            },{
              value:'电磁炉',
              label:'电磁炉'
            },{
              value:'前置过滤器',
              label:'前置过滤器'
            },{
              value:'电水壶/热水瓶',
              label:'电水壶/热水瓶'
            },{
              value:'LED电视',
              label:'LED电视'
            },{
              value:'取暖电器',
              label:'取暖电器'
            },{
              value:'烤箱',
              label:'烤箱'
            },{
              value:'嵌入式厨电',
              label:'嵌入式厨电'
            },{
              value:'冷柜',
              label:'冷柜'
            }]
          },{
            value: '品牌偏好',
            label: '品牌偏好',
            children:[{
              value:'海尔',
              label:'海尔'
            },{
              value:'卡萨帝',
              label:'卡萨帝'
            },{
              value:'MOOKA',
              label:'MOOKA'
            },{
              value:'其他',
              label:'其他'
            },{
              value:'统帅',
              label:'统帅'
            },]
          },]
        },]    
      };
    },
    created(){
      
    },
  methods: {
    //表格格式
    tableRowClassName({row, rowIndex}) {
      var temp=rowIndex/2
        if (Number.isInteger(temp)) {
          return 'warning-row';
        } else{
          return 'success-row';
        }
        return '';
      },
    //这是分页器的东西
      current_change(currentPage){
        this.currentPage = currentPage;
      },
      handleSizeChange(val){
        
        console.log("想看这里的值")
        this.pagesize=val;
        console.log("目前页数"+this.pagesize)
        console.log("目前的页"+this.currentPage)
      },

      //这是标签的东西
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      submitTag(){
        // console.log("6333333333333333333333333333333333333333333")
        // var temp=JSON.stringify(this.dynamicTags)
        // console.log(temp)
        // this.$axios.post('/api/userList/tagSearching',JSON.stringify(this.dynamicTags))
        //   .then(res=>{   
        //     console.log(res)
        //   })

        // var formdata=new FormData()
        // formdata.append('username','1')
        // formdata.append('password','this.addInfo.password')
        // formdata.append('mail','this.addInfo.mail')
        // formdata.append('phonenumber','this.addInfo.phonenumber')
        // formdata.append('data','ddd')
        // console.log(formdata)
        console.log("现在的分页情况")
        console.log
        var formdata={
          'tags':JSON.stringify(this.dynamicTags),
        }
        var that=this
        this.$axios.post('/api/userList/tagSearching',formdata)
          .then(res=>{   
            console.log(res)
            that.tabledata=res.data;
            that.total=res.data.length;
          })
        this.showflag=false

        
      },

      // handleInputConfirm() {
      //   console.log("xxxxxxxxxxxxxxxxxx")
      //   let inputValue = this.inputValue;
      //   if (inputValue) {
      //     this.dynamicTags.push(inputValue);
      //   }
      //   this.inputVisible = false;
      //   this.inputValue = '';
      // },

      collapse_handleChange(value) {
        console.log(value);
      },
      
      tag_handleChange(val) {
        var len=val.length
        let inputValue =val[len-2]+"-"+val[len-1];
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        // console.log(val)
        // console.log(this.dynamicTags)
        
      }
   }

}
</script>

<style>
.el-tag + .el-tag {
    margin-left: 60px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .box-card{
    width: 1120px;
    border-radius: 20px;
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
</style>
<style>
  .el-table .warning-row {
    background: rgb(202, 213, 245);
  }

  .el-table .success-row {
    background: #d7eaf7;
  }
</style>